import Vue from 'vue'
//导入vue      从node_modules文件中导入
import App from './App.vue'
import router from './router'
// 路由   相当于import router from './router/index.js'
import store from './store'
// vuex   import store from './store/index.js'

Vue.config.productionTip = false
Vue.config.keyCodes.a= 65


// ant组件
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);


// 导入bs
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

import 'animate.css';



// 全局过滤器
// Vue.filter('过滤器名字',回调函数(data，format))
//                          data是管道符前面数据，format是传递的参数
//            当有多个过滤器时，data是上一个过滤器返回的内容
Vue.filter('setMsg',function(data,format){
  console.log(data,format)
  // return '哈哈哈'
  return data.replace('tmd','***')
})

// 多个过滤器
//            当有多个过滤器时，data是上一个过滤器返回的内容
Vue.filter('setMsg1',function(data,format){
  console.log(data,format)
  // return '哈哈哈'
  // return data.replace('tmd','***')
})





// 全局自定义指令  （1）bind（2）inserted（3）update
// Vue.directive('自定义指令名字',{bind,inserted})
Vue.directive('color',{

  // （1）bind：指令第一次绑定到元素时调用  操作的是虚拟dom
  bind(el,binding){
    // el:指令所绑定的dom元素       binding:一个对象
    // console.log(el)
    // console.log(binding)
    console.log(binding.value)   //green

    // 给元素绑定的属性值 green
    el.style.color=binding.value    //el.style.color='red'  写死写成red
    // el.focus()     //操作的是虚拟的dom，所以获取焦点不起作用
  },


  // （2）inserted 当元素渲染到界面上之后执行   操作的是真是的dom
  inserted(el){
    console.log(el)
    el.focus()
  },


  // （3）update  当元素有更新的时候执行
  update(el){
    console.log(el)
    console.log('update')
  }
})






// 4.将路由挂载到vue实例上
new Vue({
  router,
  store,
  render: h => h(App)   //操作虚拟dom
}).$mount('#app')     //控制区域
